<script lang="ts" setup>
import { reactive } from 'vue'
import { ElButton } from 'element-plus'

interface Student {
  name: string
  age: number
  sex: string
}
const tableData = reactive<Student[]>([
  {
    name: '王五',
    age: 20,
    sex: '男'
  },
  {
    name: '张三',
    age: 18,
    sex: ''
  },
  {
    name: '李四',
    age: 19,
    sex: '男'
  }
])
const tableConfigOper = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'default',
      label: '姓名',
      prop: 'name'
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age'
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 },
    {
      label: '操作（自定义）',
      type: 'operate',
      minWidth: 140,
      prop: 'operate',
      slotName: 'operate'
    }
  ]
})
</script>
<template>
  <XyTable :tableConfig="tableConfigOper" :tableData="tableData">
    <template #operate="data">
      <el-button type="primary" text @click="console.log(data)">操作</el-button>
    </template>
  </XyTable>
</template>
